<template>
  <codemirror
    class="code"
    ref="editScript"
    v-model="codeModel"
    :extensions="extensions"
    v-bind="cmOption"
    @ready="handleReady"
  />
</template>

<script>
import { Codemirror } from "vue-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { oneDark } from "@codemirror/theme-one-dark";
// import { propTypes } from "@/utils/propTypes";

export default {
  props: [
    {
      name: "code",
      type: String,
      default: "",
    },
    {
      name: "model",
      type: String,
      default: "text/javascript",
    },
  ],
  emits: ["update:code"],
  components: {
    Codemirror,
  },
  data() {
    return {
      codeModel: "",
      extensions: [javascript(), oneDark],
      view: "",
      cmOption: {
        tabSize: 2,
        lineNumbers: true,
        line: true,
        indentWithTabs: true,
        smartIndent: true,
        autofocus: true,
        mode: props.model,
        theme: "monokai",
        foldGutter: true,
        lineWrapping: true,
        gutters: [
          "CodeMirror-linenumbers",
          "CodeMirror-foldgutter",
          "CodeMirror-lint-markers",
        ],
      },
    };
  },
  watch: {
    code: {
      handler(val) {
        this.codeModel = val;
      },
      immediate: true,
    },
    codeModel(val) {
      this.emits("update:code", val);
    },
  },
  mounted() {},
  methods: {
    handleReady(payload) {
      this.view = payload.view;
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep(.cm-editor) {
  min-height: 200px;
}
</style>
